<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/jquery.Jcrop.min.css')?>">
<script type="text/javascript" src="<?=base_url('assets/js/jquery.Jcrop.min.js')?>"></script>
<script type="text/javascript">
	jQuery(function(){
		jQuery('#jcrop_target').Jcrop({
			onChange: showPreview,
			onSelect: showPreview			
		});
		// jQuery('#width').html(jQuery('#jcrop_target').width() + 'px');
		// jQuery('#height').html(jQuery('#jcrop_target').height() + 'px');
	});
	function showPreview(coords){
		var rx = 100 / coords.w;
		var ry = 100 / coords.h;
		jQuery('#jcrop_target')
		var ratio = jQuery('#width').val()/jQuery('#jcrop_target').width();
		jQuery('#selectWidth').html(coords.w*ratio + 'px');
		jQuery('#selectHeight').html(coords.h*ratio + 'px');
		jQuery('#x').val(coords.x * ratio);
		jQuery('#y').val(coords.y * ratio);
		jQuery('#w').val(coords.w * ratio);
		jQuery('#h').val(coords.h * ratio);
		
		// $('#preview').css({
			// width: Math.round(rx * 500) + 'px',
			// height: Math.round(ry * 370) + 'px',
			// marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			// marginTop: '-' + Math.round(ry * coords.y) + 'px'
		// });
	}
	function checkCoords(){
		if (parseInt(jQuery('#w').val())>0) return true;
		alert('Chưa chọn vùng để Crop.');
		return false;
	}
</script>
<div class="page-header">
	<h1>Crop Image <small></small></h1>
</div>
<div class="row">
	<div class="span6">		
		<img style="max-width:100%;" id="jcrop_target" src="<?=base_url($media->path);?>"/>
		<br/>
		<p>Width: <strong id="selectWidth">0</strong>, Height: <strong id="selectHeight">0</strong></p>
	</div>
	<div class="span6">
		<table class="table">
			<tbody>
				<tr>
					<td width="18%">File Name</td>
					<td><?=$media->file_name?></td>
				</tr>
				<tr>
					<td>Width:</td>
					<td>
						<?php $obj = getimagesize($media->path);
							echo $obj[0].'px';
						?>					
						<input type="hidden" id="width" value="<?=$obj[0];?>"/>
					</td>
				</tr>
				<tr>
					<td>Height:</td>
					<td>
						<?=$obj[1].'px';?>
						<input type="hidden" id="height" value="<?=$obj[1];?>"/>
					<td>
				</tr>
				<tr>
					<td>Size:</td>
					<td><?=round($media->size/(1024*1024),2);?> MB</td>
				</tr>
				<tr>
					<td>Created:</td>
					<td><?=$media->created;?></td>
				</tr>
				<tr>
					<td>Modify:</td>
					<td><?=$media->modify;?></td>
				</tr>
				<tr>
					<td>Url:</td>
					<td><input style="width:100%" type="text" value="<?=base_url($media->path)?>"/></td>
				</tr>
			</tbody>
		</table>
		<form action="<?=base_url('admin/media/crop')?>" method="post">
			<input type="hidden" id="x" name="x">
			<input type="hidden" id="y" name="y">
			<input type="hidden" id="w" name="w">
			<input type="hidden" id="h" name="h">
			<input type="hidden" id="id" name="id" value="<?=$media->id?>">
			<input type="submit" class="btn btn-default" value="Crop & Save" onclick="return checkCoords();"/>
		</form>
	</div>
</div>